[id].vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. <template>
  2. <!-- 页面头部 -->
  3. <HomePageHead></HomePageHead>
  4. <!-- 导航栏 -->
  5. <HomePageNavigation1></HomePageNavigation1>
  6. <!-- 列表页广告一 -->
  7. <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
  8. <!-- 面包屑导航 -->
  9. <div class="breadcrumb">
  10. <div class="inner">
  11. <span class="location">当前位置:</span>
  12. <el-breadcrumb :separator-icon="ArrowRight">
  13. <el-breadcrumb-item>
  14. <NuxtLink to="/">首页</NuxtLink>
  15. </el-breadcrumb-item>
  16. <el-breadcrumb-item v-if="parent_name != ''">
  17. <NuxtLink :to="`/${parent_pinyin}/`"> {{ parent_name }}</NuxtLink>
  18. </el-breadcrumb-item>
  19. <el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
  20. </el-breadcrumb>
  21. </div>
  22. </div>
  23. <!-- 资讯列表 -->
  24. <div class="newsDetail">
  25. <div class="inner">
  26. <div class="innerLeft">
  27. <div class="LeftTop">
  28. <h1>{{ newsDetail.title }}</h1>
  29. <p>
  30. 来源: <span>{{ newsDetail.copyfrom }}</span>
  31. 作者: <span>{{ newsDetail.author }}</span>
  32. 发布时间: <span>{{ time }}</span>
  33. </p>
  34. <!-- <img :src="newsDetail.imgurl" v-if="newsDetail.imgurl&&newsDetail.level==2||newsDetail.level==3"> -->
  35. </div>
  36. <!-- <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div> -->
  37. <div
  38. class="leftBottom"
  39. v-html="newsDetail.content"
  40. v-if="newsDetail.content"
  41. @click="openPreview">
  42. </div>
  43. <div v-if="previewVisible" class="preview-modal" @click="closePreview">
  44. <img :src="selectedImage" alt="Preview">
  45. </div>
  46. <!-- 免责声明: -->
  47. <div class="disclaimer" v-if="newsDetail.copyfrom!='本网'">
  48. <p>原文链接:{{ newsDetail.fromurl }}</p>
  49. <p>[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。 版权归原作者所有,如涉及作品内容,版权和其他问题,请在30日与本网联系,我们将第一时间处理。</p>
  50. </div>
  51. <div v-if="articleChoice">
  52. <!-- 投票 start ---------------------------------------->
  53. <div class="index_3_box_vote" v-if="articleChoice">
  54. <div class="voteTitle">投票区</div>
  55. <div class="inquire">
  56. <p v-if="voteList.length>0">{{voteList[0].survey_name}}</p>
  57. <div class="radioBox">
  58. <!--投票选项-->
  59. <div v-if="!isDisabled">
  60. <div class="radio" v-if="isRadio">
  61. <el-radio-group v-model="radio1" @change="handleRadioChange">
  62. <el-radio v-for="item in voteList" :key="item.id" :value="item.id" size="large">
  63. <span v-if="item.is_other == 0">{{item.choice_name}}</span>
  64. <span v-else>其他</span>
  65. </el-radio>
  66. </el-radio-group>
  67. <el-input
  68. v-if="showUserChoice"
  69. v-model="userChoice"
  70. :rows="2"
  71. type="textarea"
  72. resize="none"
  73. placeholder="请输入.."
  74. />
  75. </div>
  76. <div class="checkInputBox" v-else>
  77. <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
  78. <span v-for="item in voteList" :key="item.id">
  79. <span v-if="item.is_other == 0">
  80. <el-checkbox size="large" :label="item.choice_name" :value="item.id"/>
  81. </span>
  82. <span v-else>
  83. <el-checkbox size="large" label="其他" :value="item.id"/>
  84. </span>
  85. </span>
  86. </el-checkbox-group>
  87. <el-input
  88. v-if="showUserChoice"
  89. v-model="userChoice"
  90. :rows="2"
  91. type="textarea"
  92. resize="none"
  93. placeholder="请输入.."
  94. />
  95. </div>
  96. </div>
  97. <!--投票结果-->
  98. <div class="inquireData" v-else>
  99. <div v-for="item in websiteSurveyData.data" :key="item.id">
  100. <div class="inquireDataItem active" v-if="item.status == 1">
  101. <div class="inquireDataItemTitle">
  102. <span v-if="item.choice_name == ''">其他</span>
  103. <span v-else>{{item.choice_name}}</span>
  104. </div>
  105. <div class="inquireDataItemNum">{{item.results}}票</div>
  106. </div>
  107. <div class="inquireDataItem" v-else>
  108. <div class="inquireDataItemTitle">
  109. <span v-if="item.choice_name == ''">其他</span>
  110. <span v-else>{{item.choice_name}}</span>
  111. </div>
  112. <div class="inquireDataItemNum">{{item.results}}票</div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <div class="btn">
  118. <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- 投票 end ---------------------------------------->
  123. </div>
  124. </div>
  125. <div class="innerRight">
  126. <!-- 热点资讯1 -->
  127. <div class="hotList1">
  128. <DetailHotNews></DetailHotNews>
  129. </div>
  130. <!-- 热点资讯2 -->
  131. <div class="hotList2">
  132. <DetailHotNews2></DetailHotNews2>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <!-- 页面底部 -->
  138. <HomeFoot1></HomeFoot1>
  139. </template>
  140. <script setup>
  141. //1.页面依赖 start ---------------------------------------->
  142. import { onMounted } from 'vue'
  143. import { ElBreadcrumb, ElBreadcrumbItem,ElRadio, ElRadioGroup,ElCheckbox,ElCheckboxGroup,ElMessage,ElInput } from 'element-plus'
  144. import { ArrowRight } from '@element-plus/icons-vue'
  145. const nuxtApp = useNuxtApp();
  146. const axios = nuxtApp.$axios;
  147. //1.1 获得跳转过来的id
  148. const route = useRoute();
  149. //获得详情id
  150. const articleId = parseInt(route.params.id); //获得该页面的id
  151. //获得当前的完整路径
  152. const fullPath = route.path;
  153. //拆分,取出来中间这一段,然后提取数字部分
  154. const segments = fullPath.split('/');
  155. const targetSegment = segments[1];
  156. // const numberPart = targetSegment.match(/\d+$/)?.[0];
  157. // let routeId = 20 //排除路径错误可以打开这个
  158. // const routeId = numberPart;
  159. let routeId;
  160. //通过导航路径反向查询导航id
  161. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  162. method: 'GET',
  163. query: {
  164. 'pinyin': targetSegment,
  165. },
  166. });
  167. if(getRouteId.code == 200){
  168. routeId = getRouteId.data.category_id
  169. }else{
  170. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  171. console.log("错误位置:通过url路径查询导航池id")
  172. console.log("后端错误反馈:",getRouteId.message)
  173. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  174. }
  175. //1.2 获得父级栏目的名称、id
  176. const parent_name = ref([]);
  177. const parent_id = ref([]);
  178. const parent_pinyin = ref("");
  179. let getParentNav = async () => {
  180. const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
  181. method: 'GET',
  182. query: {
  183. 'catid': routeId
  184. },
  185. });
  186. console.log("获取父级栏目数据")
  187. console.log(listData)
  188. if (listData.code == 200) {
  189. console.log(listData.data);
  190. parent_name.value = listData.data.alias;
  191. parent_id.value = listData.data.parent_id;
  192. parent_pinyin.value = listData.data.aLIas_pinyin;
  193. } else {
  194. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  195. console.log("错误位置:获取面包屑导航")
  196. console.log("后端错误反馈:", listData.message)
  197. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  198. }
  199. }
  200. //获得父级栏目详情
  201. getParentNav();
  202. //1.页面依赖 end ---------------------------------------->
  203. //2.页面数据 start ---------------------------------------->
  204. //2.1 资讯详情
  205. const newsDetail = ref({})
  206. const routeNewsTtitle = ref("");
  207. //2.2 发布日期
  208. const time = ref("");
  209. //2.3 路径
  210. const routLevelTitle = ref("");
  211. const routLevelId = ref("");
  212. //是否展示投票
  213. const articleChoice = ref(false);
  214. //2.4获取详情
  215. async function getPageData() {
  216. const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  217. method: 'GET',
  218. query: {
  219. 'articleid': articleId
  220. },
  221. });
  222. if(mkdata.code==200){
  223. //判断是否显示投票
  224. if(mkdata.data.is_survey==1){
  225. console.log("本篇文章含有投票!")
  226. articleChoice.value = true;
  227. getVoteList();
  228. }
  229. //获取内容
  230. newsDetail.value = mkdata.data;
  231. //获取路径
  232. routLevelTitle.value = newsDetail.value.cat_name;
  233. routLevelId.value = newsDetail.value.category_id;
  234. //获取发布时间
  235. time.value = newsDetail.value.updated_at.split(' ')[0];
  236. //修正标题长度
  237. if (newsDetail.value.title.length >= 30) {
  238. routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
  239. } else {
  240. routeNewsTtitle.value = newsDetail.value.title
  241. }
  242. }else{
  243. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  244. console.log("错误位置:获取详情内容")
  245. console.log("后端错误反馈:",mkdata.message)
  246. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  247. }
  248. }
  249. getPageData();
  250. //2.5 获得广告
  251. //广告列表
  252. let adImg1 = ref([]);
  253. // async function getAdData(){
  254. // const adData = await requestDataPromise('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'DETAIL'}});
  255. // if(adData.code==200){
  256. // for(let item of adData.data){
  257. // if(item.ad_tag == 'DETAIL_0001'){
  258. // adImg1.value = item;
  259. // }
  260. // }
  261. // }else{
  262. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  263. // console.log("错误位置:获取详情页广告列表")
  264. // console.log("后端错误反馈:",adData.message)
  265. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  266. // }
  267. // }
  268. // getAdData();
  269. onMounted(async () => {
  270. const { $webUrl, $CwebUrl } = useNuxtApp();
  271. //广告1
  272. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
  273. const responseAd1 = await fetch(url, {
  274. headers: {
  275. 'Content-Type': 'application/json',
  276. 'Userurl': $CwebUrl,
  277. 'Origin': $CwebUrl
  278. }
  279. });
  280. const resultAd1 = await responseAd1.json();
  281. adImg1.value = resultAd1.data[0];
  282. })
  283. //2.页面数据 end ---------------------------------------->
  284. //3.设置seo信息 start---------------------------------------->
  285. //3.1 设置seo信息
  286. const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
  287. method: 'GET',
  288. query: {
  289. 'articleid': articleId
  290. },
  291. });
  292. if(setData.code==200){
  293. let seoTitle = setData.data.title;
  294. let seoDescription = setData.data.introduce;
  295. let seoKeywords = setData.data.keyword;
  296. let seoSuffix = setData.data.suffix;
  297. let seoName = setData.data.website_name;
  298. useSeoMeta({
  299. title: seoTitle + "_" + seoName + "_" + seoSuffix,
  300. meta: [
  301. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
  302. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 }
  303. ]
  304. });
  305. }else{
  306. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  307. console.log("错误位置:设置详情页面SEO数据")
  308. console.log("后端错误反馈:",setData.message)
  309. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  310. }
  311. //3.设置seo信息 end---------------------------------------->
  312. //4.投票 start---------------------------------------->
  313. const radio1 = ref(''); //单选
  314. const check1 = ref([]); //多选
  315. const isDisabled = ref(false);//是否禁用提交按钮
  316. const isRadio = ref(true);//是否渲染单选
  317. const userSurId = ref('');//投票属于哪一篇文章
  318. const userChoice = ref('');//用于判断用户选择了其他选项以后,输入的值
  319. const userIsChoice = ref('');//用于判断其他选项目前是什么值
  320. const showUserChoice = ref(false);//是否显示其他输入框
  321. const websiteSurveyData = ref([]);//投票结果
  322. //3.2获得投票列表
  323. let voteList = ref([]);
  324. async function getVoteList(){
  325. const voteData = await requestHome('/web/getWebsiteSurvey',{method:'GET',query:{'art_id':articleId}});
  326. console.log(778899)
  327. console.log(voteData)
  328. if(voteData.code == 200){
  329. voteList.value = voteData.data;
  330. console.log(voteList.value)
  331. //判断显示单选还是多选
  332. //survey_type 0是单选 1是多选
  333. if(voteData.data[0].survey_type == 0){
  334. isRadio.value = true;
  335. console.log("1111")
  336. }else{
  337. isRadio.value = false;
  338. }
  339. //把最后一个的值拿出来 用于判断用户是否选择了其他
  340. for(let item of voteData.data){
  341. //如果含有其他
  342. if(item.is_other==1){
  343. userIsChoice.value = item.id;
  344. }
  345. }
  346. //用户投票属于哪一篇文章
  347. userSurId.value = voteData.data[0].sur_id;
  348. }else{
  349. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  350. console.log("错误位置:首页投票")
  351. console.log("后端错误反馈:",voteData.message)
  352. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  353. }
  354. }
  355. //3.2当用户选择了选项,判断是否展示其他输入框
  356. const handleRadioChange = (value) => {
  357. if(value == userIsChoice.value){
  358. showUserChoice.value = true;
  359. }else{
  360. showUserChoice.value = false;
  361. }
  362. }
  363. const handleCheckboxChange = (value) => {
  364. if (value.includes(userIsChoice.value)) {
  365. showUserChoice.value = true;
  366. } else {
  367. showUserChoice.value = false;
  368. }
  369. }
  370. //3.2发起投票
  371. async function addWebsiteSurvey(){
  372. //判断当前是单选还是多选
  373. console.log(isRadio.value)
  374. if(isRadio.value){
  375. console.log("用户单选!")
  376. if(radio1.value!=''){
  377. //先判断一下是否使用了其他选项
  378. if(showUserChoice.value){
  379. if(userChoice.value!=''){
  380. //文章id
  381. // console.log(userSurId.value)
  382. // 用户输入的值
  383. // console.log(userChoice.value)
  384. //如果使用了其他,其他的选项需要增加进去
  385. const ChoiceData = await requestHome('/web/addWebsiteSurveyOption',{
  386. method:'GET',
  387. query:{
  388. 'sur_id':userSurId.value,//投票的新闻id
  389. 'choice_name':userChoice.value,//投票的选项id
  390. }
  391. });
  392. if(ChoiceData.code == 200){
  393. //提交完其他选项以后,再正式发起投票
  394. const mkData = await requestHome('/web/addWebsiteSurveyVote',{
  395. method:'GET',
  396. query:{
  397. 'sur_id':userSurId.value,
  398. 'choice_id':ChoiceData.data
  399. }
  400. });
  401. if(mkData.code == 200){
  402. ElMessage.success('投票成功!')
  403. //把投票结果显示到页面上 禁用投票按钮
  404. isDisabled.value = true;
  405. websiteSurveyData.value = mkData.data;
  406. //遍历一下,把用户选中的那个设置status为1
  407. let data = mkData.data;
  408. //遍历一下,把用户选中的那个设置status为1
  409. for(let item of data.data){
  410. for(let i of data.choice){
  411. if(item.id == i){
  412. console.log(item.id)
  413. item.status = 1;
  414. }
  415. }
  416. }
  417. websiteSurveyData.value = data;
  418. }else{
  419. ElMessage.error(mkData.message)
  420. }
  421. }else{
  422. ElMessage.error('其他投票失败!')
  423. }
  424. }else{
  425. ElMessage.error('请输入选项内容!')
  426. }
  427. }else{
  428. //如果没选择其他,直接提交选择的内容
  429. const mkData = await requestHome('/web/addWebsiteSurveyVote',{
  430. method:'GET',
  431. query:{
  432. 'sur_id':userSurId.value,
  433. 'choice_id':radio1.value
  434. }
  435. });
  436. if(mkData.code == 200){
  437. ElMessage.success('投票成功!')
  438. //把投票结果显示到页面上 禁用投票按钮
  439. isDisabled.value = true;
  440. let data = mkData.data;
  441. //遍历一下,把用户选中的那个设置status为1
  442. for(let item of data.data){
  443. for(let i of data.choice){
  444. if(item.id == i){
  445. item.status = 1;
  446. }
  447. }
  448. }
  449. websiteSurveyData.value = data;
  450. }else{
  451. ElMessage.error('投票失败!')
  452. }
  453. }
  454. }else{
  455. ElMessage.error('请选择一个选项')
  456. }
  457. }else{
  458. console.log("多选!")
  459. //多选
  460. if(check1.value!=[]){
  461. //先判断一下是否使用了其他选项
  462. if(showUserChoice.value){
  463. if(userChoice.value!=''){
  464. //判断用户是否只选择了一个其他
  465. if(check1.value.length == 1){
  466. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
  467. method:'GET',
  468. query:{
  469. 'sur_id':userSurId.value,//投票的新闻id
  470. 'choice_name':userChoice.value,//用户输入的其他选项文字
  471. }
  472. });
  473. if(ChoiceData.code == 200){
  474. //提交完其他选项以后,再正式发起投票
  475. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
  476. method:'GET',
  477. query:{
  478. 'sur_id':userSurId.value,
  479. 'choice_id':ChoiceData.data
  480. }
  481. });
  482. if(mkData.code == 200){
  483. ElMessage.success('投票成功!')
  484. //把投票结果显示到页面上 禁用投票按钮
  485. isDisabled.value = true;
  486. websiteSurveyData.value = mkData.data;
  487. //遍历一下,把用户选中的那个设置status为1
  488. let data = mkData.data;
  489. //遍历一下,把用户选中的那个设置status为1
  490. for(let item of data.data){
  491. for(let i of data.choice){
  492. if(item.id == i){
  493. console.log(item.id)
  494. item.status = 1;
  495. }
  496. }
  497. }
  498. websiteSurveyData.value = data;
  499. }else{
  500. ElMessage.error(mkData.message)
  501. }
  502. }else{
  503. ElMessage.error('其他投票失败!')
  504. }
  505. }else{
  506. //用户选择了除了其他以外,还包括别的选项
  507. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
  508. method:'GET',
  509. query:{
  510. 'sur_id':userSurId.value,//投票的新闻id
  511. 'choice_name':userChoice.value,//用户输入的其他选项文字
  512. }
  513. });
  514. if(ChoiceData.code == 200){
  515. let data = check1.value;
  516. //找到多选的数组,把其他默认值给替换掉
  517. for (let i = 0; i < data.length; i++) {
  518. if (data[i] == userIsChoice.value) {
  519. data[i] = ChoiceData.data;
  520. }
  521. }
  522. let jsonArray = JSON.stringify(data);
  523. //提交完其他选项以后,再正式发起投票
  524. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
  525. method:'GET',
  526. query:{
  527. 'sur_id':userSurId.value,
  528. 'choice_id':jsonArray
  529. }
  530. });
  531. if(mkData.code == 200){
  532. ElMessage.success('投票成功!')
  533. //把投票结果显示到页面上 禁用投票按钮
  534. isDisabled.value = true;
  535. websiteSurveyData.value = mkData.data;
  536. //遍历一下,把用户选中的那个设置status为1
  537. let data = mkData.data;
  538. //遍历一下,把用户选中的那个设置status为1
  539. for(let item of data.data){
  540. for(let i of data.choice){
  541. if(item.id == i){
  542. //console.log(item.id)
  543. item.status = 1;
  544. }
  545. }
  546. }
  547. websiteSurveyData.value = data;
  548. }else{
  549. ElMessage.error(mkData.message)
  550. }
  551. }else{
  552. ElMessage.error('其他投票失败!')
  553. }
  554. }
  555. }else{
  556. ElMessage.error('请输入选项内容!')
  557. }
  558. }else{
  559. let jsonArray = JSON.stringify(check1.value);
  560. //如果没选择其他,直接提交选择的内容
  561. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
  562. method:'GET',
  563. query:{
  564. 'sur_id':userSurId.value,
  565. 'choice_id':jsonArray
  566. }
  567. });
  568. if(mkData.code == 200){
  569. ElMessage.success('投票成功!')
  570. //把投票结果显示到页面上 禁用投票按钮
  571. isDisabled.value = true;
  572. websiteSurveyData.value = mkData.data;
  573. //遍历一下,把用户选中的那个设置status为1
  574. let data = mkData.data;
  575. //遍历一下,把用户选中的那个设置status为1
  576. for(let item of data.data){
  577. for(let i of data.choice){
  578. if(item.id == i){
  579. console.log(item.id)
  580. item.status = 1;
  581. }
  582. }
  583. }
  584. websiteSurveyData.value = data;
  585. }else{
  586. ElMessage.error('投票失败!')
  587. }
  588. }
  589. }else{
  590. ElMessage.error('请选择一个选项')
  591. }
  592. }
  593. }
  594. //4.投票 end---------------------------------------->
  595. //5.页面图片放大 start---------------------------------------->
  596. const previewVisible = ref(false)
  597. const selectedImage = ref(' ')
  598. const openPreview = (event) => {
  599. if (event.target.tagName === 'IMG') {
  600. selectedImage.value = event.target.src;
  601. previewVisible.value = true;
  602. }
  603. }
  604. const closePreview = () => {
  605. previewVisible.value = false;
  606. }
  607. //5.页面图片放大 end---------------------------------------->
  608. </script>
  609. <style lang="less" scoped>
  610. @import url('@/assets/css/detail.less');
  611. </style>